<template>
  <div style="width: 100%;height: 100%">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">更多图片</span>
      </x-header>
    </div>
    <flexbox>
      <flexbox-item><div class="pic1"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""></div></flexbox-item>
      <flexbox-item><div class="pic2"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""></div></flexbox-item>
    </flexbox>
    <flexbox>
      <flexbox-item><div class="pic1"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""></div></flexbox-item>
      <flexbox-item><div class="pic2"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""></div></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux'
    export default {
        name: "morepic",
      methods:{
        back(){
          this.$router.go(-1)
        },
      },
      components: {
        Flexbox,
        FlexboxItem
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .pic1{
    margin-left: 1.07rem;
  }
  .pic2{
    margin-right: 1.07rem;
  }
  .pic1 img{
    width: 11.79rem;
    height: 8.57rem;
  }
  .pic2 img{
    width: 11.79rem;
    height: 8.57rem;
  }
</style>
